<template>
  <div class="designer-container">
    <el-tabs v-model="showPanel" class="designer-container-header"
             @tab-change="showPanelChange">
      <el-tab-pane class="designer-container-panel" name="form" label="表单设计">
        <FromDesigner ref="FromDesigner" @loadFormDefinition="loadFormDefinition"/>
      </el-tab-pane>
      <el-tab-pane class="designer-container-panel" name="action" label="操作设置">
        <ActionConfiguration ref="ActionConfiguration"/>
      </el-tab-pane>
      <el-tab-pane class="designer-container-panel" name="menu" label="业务列表设置">
        <FormMenuConfig ref="FormMenuConfig"/>
      </el-tab-pane>

      <el-tab-pane class="designer-container-panel" name="flow" label="流程模板设置">
        <FormFlowDesign ref="FormFlowDesign"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import './Designer.css';
import '@/components/form/table/DavidTable.css';
import '@/components/form/textInput/textInput.css';
import FromDesigner from '@/components/form/FromDesigner';
import ActionConfiguration from '@/components/form/ActionConfiguration/index.vue';
import FormFlowDesign from '@/components/form/FormFlowDesign/index.vue';
import FormMenuConfig from '@/components/form/FormMenuConfig';
import {ElMessageBox} from 'element-plus';
import {isNotEmpty} from '@/utils/CommonUtils';

export default {
  name: "Designer",
  components: {
    FromDesigner,
    FormFlowDesign,
    FormMenuConfig,
    ActionConfiguration
  },
  data() {
    return {
      showPanel: 'form',
      lastShowPanel: 'form',
      processForm: true,
    };
  },
  mounted() {
    if (this.$route.query.processForm + '' === '1') {
      this.processForm = true;
    } else {
      this.processForm = false;
    }
  },
  methods: {
    setData({formId}) {
      this.showPanel = 'form';

      this.$nextTick(() => {
        this.$refs.FromDesigner.setData({formId});
      });
    },
    loadFormDefinition(formDefinition) {
      this.processForm = formDefinition.processForm;
    },
    showPanelChange(val) {
      if (this.lastShowPanel === 'menu'
          && this.showPanel !== 'menu'
          && isNotEmpty(this.$refs.FormMenuConfig.edittingMenu)) {
        this.$nextTick(() => {
          this.showPanel = this.lastShowPanel;
        });
        ElMessageBox.confirm('数据还未保存, 放弃编辑?', '放弃编辑?', {
          draggable: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$refs.FormMenuConfig.clearSelected();
          this.$nextTick(() => {
            this.resolvePanelData();
          });
          this.lastShowPanel = this.showPanel = val;
        }).catch(() => {
          this.showPanel = this.lastShowPanel;
        });
      } else {
        this.$nextTick(() => {
          this.resolvePanelData();
        });
        this.lastShowPanel = this.showPanel = val;
      }
    },
    resolvePanelData() {
      if (this.showPanel === 'action') {
        let formDefinition = this.$refs.FromDesigner.getData();
        this.$refs.ActionConfiguration.setData(formDefinition);
      }
      if (this.showPanel === 'flow') {
        let formDefinition = this.$refs.FromDesigner.getData();
        this.$refs.FormFlowDesign.setData(formDefinition);
      }
      if (this.showPanel === 'menu') {
        let formDefinition = this.$refs.FromDesigner.getData();
        this.$refs.FormMenuConfig.setData(formDefinition);
      }
    },
  }
};
</script>

<style scoped>

</style>
